<template>
  <el-row>
    <el-col :span="24">
      <el-card>
        <el-form :inline="true" class="demo-form-inline">
          <el-form-item>
            <el-button-group class="button-group">
              <el-button type="success" plain style="margin-bottom: 9px;" @click="addDialogShow = true">添加
              </el-button>
            </el-button-group>
          </el-form-item>
          <el-form-item style="float: right;">
            <el-input v-model="condition.username" placeholder="请输入要查询的用户名" @input="selectByPage(1)"/>
          </el-form-item>
          <el-form-item style="float: right;">
            <el-input v-model="condition.email" placeholder="请输入要查询的邮箱" @input="selectByPage(1)"/>
          </el-form-item>
          <el-form-item style="float: right;">
            <el-select
                v-model="condition.status"
                clearable
                placeholder="请选择状态"
                :value-on-clear="null"
                style="width: 200px"
                @change="selectByPage(1)">
              <el-option label="禁用" value="1"/>
              <el-option label="正常" value="0"/>
            </el-select>
          </el-form-item>
        </el-form>
        <el-table :data="pageInfo.list" border style="width: 100%">
          <el-table-column prop="id" label="ID"/>
          <el-table-column prop="username" label="用户名"/>
          <el-table-column prop="phone" label="电话"/>
          <el-table-column prop="email" label="邮箱"/>
          <el-table-column prop="realname" label="真实姓名"/>
          <el-table-column prop="createTime" label="创建时间"/>
          <el-table-column label="使用状态">
            <template #default="scope">
              <el-switch
                  v-model="scope.row.status"
                  inline-prompt
                  style="--el-switch-off-color: #13ce66; --el-switch-on-color: #ff4949"
                  active-text="禁用"
                  inactive-text="正常"
                  :active-value="1"
                  :inactive-value="0"
                  @change="deleteAdmin(scope.row.id,scope.row.status)"
              />
            </template>
          </el-table-column>
          <el-table-column label="操作" width="150">
            <template #default="scope">
              <el-button size="small" type="primary" @click="selectById(scope.row.id)">修改</el-button>
              <!--<el-popconfirm title="你确认要删除嘛" confirm-button-text="确认" cancel-button-text="取消" width="200px"-->
              <!--               @confirm="deleteAdmin(scope.row.id)">-->
              <!--  <template #reference>-->
              <!--    <el-button type="danger" size="small" @click="console.log(scope.row.id)" v-if="scope.row.status == 1"-->
              <!--               disabled>删除-->
              <!--    </el-button>-->
              <!--    <el-button type="danger" size="small" @click="console.log(scope.row.id)" v-else>删除</el-button>-->
              <!--  </template>-->
              <!--</el-popconfirm>-->
              <el-button size="small" type="success" @click="selectByIdd(scope.row.id)" v-if="admin.id===scope.row.id"
                         disabled>重置
              </el-button>
              <el-button size="small" type="success" @click="selectByIdd(scope.row.id)" v-else>重置</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-row class="row-bg" justify="center" style="margin-top: 15px;">
          <div class="example-pagination-block">
            <el-pagination background layout="prev, pager, next" :total="pageInfo.total" :page-size="pageInfo.pageSize"
                           @change="selectByPage"
                           style="margin-top: 15px; display: flex; justify-content: center; align-items: center;"
                           v-model:current-page="pageInfo.pageNum"/>
          </div>
        </el-row>
      </el-card>
    </el-col>
  </el-row>

  <!-- 添加管理员对话框开始 -->
  <el-dialog v-model="addDialogShow" title="添加管理员" width="500">
    <el-form>
      <div class="form-column">
        <el-form-item label="用户名" label-width="20%">
          <el-input v-model="adminAdd.username" autocomplete="off" placeholder="请输入用户名"/>
        </el-form-item>
        <el-form-item label="密码" label-width="20%">
          <el-input v-model="adminAdd.password" autocomplete="off" placeholder="请输入密码"/>
        </el-form-item>
        <!--<el-form-item label="盐" label-width="20%">-->
        <!--  <el-input v-model="adminAdd.salt" autocomplete="off"/>-->
        <!--</el-form-item>-->
        <el-form-item label="电话" label-width="20%">
          <el-input v-model="adminAdd.phone" autocomplete="off" placeholder="请输入电话"/>
        </el-form-item>
        <el-form-item label="邮箱" label-width="20%">
          <el-input v-model="adminAdd.email" autocomplete="off" placeholder="请输入邮箱"/>
        </el-form-item>
        <el-form-item label="真实姓名" label-width="20%">
          <el-input v-model="adminAdd.realname" autocomplete="off" placeholder="请输入真实姓名"/>
        </el-form-item>
        <!--<el-form-item label="创建时间" label-width="20%">-->
        <!--  <el-date-picker-->
        <!--      v-model="adminAdd.createTime"-->
        <!--      type="datetime"-->
        <!--      placeholder="请选择时间"-->
        <!--      format="YYYY/MM/DD hh:mm"-->
        <!--      value-format="YYYY-MM-DD h:m:s "-->
        <!--  />-->
        <!--</el-form-item>-->
        <!--<el-form-item label="管理员状态" label-width="30%">-->
        <!--  <el-radio-group v-model="adminAdd.status">-->
        <!--    <el-radio label="正常" :value="0" size="large"/>-->
        <!--    <el-radio label="禁用" :value="1" size="large"/>-->
        <!--  </el-radio-group>-->
        <!--</el-form-item>-->
      </div>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="addDialogShow=false">取消</el-button>
        <el-button type="primary" @click="insert">
          确定
        </el-button>
      </div>
    </template>
  </el-dialog>
  <!-- 添加管理员对话框结束 -->

  <!--修改管理员对话框开始-->
  <el-dialog v-model="updateDialogShow" title="修改管理员" width="400">
    <el-form>
      <div class="form-column">
        <el-form-item label="用户名" label-width="20%">
          <el-input v-model="adminUpdate.username" autocomplete="off" placeholder="请输入用户名"/>
        </el-form-item>
        <!--<el-form-item label="密码" label-width="20%">-->
        <!--  <el-input v-model="adminUpdate.password" autocomplete="off" disabled/>-->
        <!--</el-form-item>-->
        <!--<el-form-item label="盐" label-width="20%">-->
        <!--  <el-input v-model="adminUpdate.salt" autocomplete="off" disabled/>-->
        <!--</el-form-item>-->
        <el-form-item label="电话" label-width="20%">
          <el-input v-model="adminUpdate.phone" autocomplete="off" placeholder="请输入电话"/>
        </el-form-item>
        <el-form-item label="邮箱" label-width="20%">
          <el-input v-model="adminUpdate.email" autocomplete="off" placeholder="请输入邮箱"/>
        </el-form-item>
        <el-form-item label="真实姓名" label-width="20%">
          <el-input v-model="adminUpdate.realname" autocomplete="off" placeholder="请输入真实姓名"/>
        </el-form-item>
        <!--<el-form-item label="管理员状态" label-width="30%">-->
        <!--  <el-radio-group v-model="adminUpdate.status">-->
        <!--    <el-radio label="正常" :value="0" size="large"/>-->
        <!--    <el-radio label="禁用" :value="1" size="large"/>-->
        <!--  </el-radio-group>-->
        <!--</el-form-item>-->
      </div>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="updateDialogShow=false">取消</el-button>
        <el-button type="primary" @click="update">
          确定
        </el-button>
      </div>
    </template>
  </el-dialog>
  <!--修改管理员对话框结束-->
</template>

<script setup>
import {ref} from "vue";
import {ElLoading, ElMessage} from "element-plus";
import adminApi from "@/api/adminApi.js";
//是否显示添加对话框
const addDialogShow = ref(false)
//是否显示修改对话框
const updateDialogShow = ref(false)
//被添加的管理员信息
const adminAdd = ref({
  username: null,
  password: null,
  salt: null,
  phone: null,
  email: null,
  realname: null,
  createTime: null,
  status: 0,
})
//被修改的管理员信息
const adminUpdate = ref({
  id: "",
  username: null,
  password: null,
  salt: null,
  phone: null,
  email: null,
  realname: null,
  status: 0,
})
//重置密码的信息
const againPassword = ref({
  id: "",
  password: "123",
})
//搜索条件
const condition = ref({
  username: null,
  email: null,
  status: null,
})

//分页信息
const pageInfo = ref({
  pages: 0,
  pageNum: 0,
  pageSize: 0
})

//分页查询
function selectByPage(pageNum) {
  adminApi.selectByPage(condition.value, pageNum, 7)
      .then(resp => {
        pageInfo.value = resp.data;
      })
}

selectByPage(1);

//增加
function insert() {
  const loading = ElLoading.service({
    lock: true,
    text: 'Loading',
    background: 'rgba(0, 0, 0, 0.7)',
  })
  adminApi.insert(adminAdd.value)
      .then(resp => {
        loading.close()
        //判断---弹出消息--刷新表格
        if (resp.code == 10000) {
          //弹出消息
          ElMessage.success(resp.msg)
          //隐藏
          addDialogShow.value = false
          //清空
          adminAdd.value = {
            username: null,
            password: null,
            salt: 123456,
            phone: null,
            email: null,
            realname: null,
            createTime: null,
            status: 1,
          }
        } else {
          //弹出消息
          ElMessage.error(resp.msg)
        }
        //刷新表格
        selectByPage(1)
      })
}

//删除
function deleteAdmin(id) {
  const loading = ElLoading.service({
    lock: true,
    text: 'Loading',
    background: 'rgba(0, 0, 0, 0.7)',
  })
  adminApi.delete(id)
      .then(resp => {
        loading.close()
        //判断---弹出消息--刷新表格
        if (resp.code === 10000) {
          //弹出消息
          ElMessage.success(resp.msg)
        } else {
          //弹出消息
          ElMessage.error(resp.msg)
        }
        //刷新表格
        selectByPage(1)
      })

}

//定义根据id查询方法查询分类信息，回显数据
function selectById(id) {
  adminApi.selectById(id)
      .then(resp => {
        adminUpdate.value = resp.data
        //展示修改模态框
        updateDialogShow.value = true;
      })
}

function selectByIdd(id) {
  adminApi.selectById(id)
      .then(resp => {
        console.log(resp.data.id)
        again(id)
      })
}

//确认修改数据
function update() {
  const loading = ElLoading.service({
    lock: true,
    text: 'Loading',
    background: 'rgba(0, 0, 0, 0.7)',
  })
  adminApi.update(adminUpdate.value)
      .then(resp => {
        loading.close()
        //判断---弹出消息--刷新表格
        if (resp.code === 10000) {
          //弹出消息
          ElMessage.success(resp.msg)
          //隐藏
          updateDialogShow.value = false
        } else {
          //弹出消息
          ElMessage.error(resp.msg)
        }
        selectByPage(pageInfo.value.pageNum)
      })
}

function again(id) {
  const loading = ElLoading.service({
    lock: true,
    text: 'Loading',
    background: 'rgba(0, 0, 0, 0.7)',
  })
  adminApi.backPwd(id)
      .then(resp => {
        loading.close()
        //判断---弹出消息--刷新表格
        if (resp.code === 10000) {
          //弹出消息
          ElMessage.success(resp.msg)
        } else {
          //弹出消息
          ElMessage.error(resp.msg)
        }
        selectByPage(pageInfo.value.pageNum)
      })
}

const admin = ref({
  id: null
})

function getInfo() {
  adminApi.getInfo()
      .then(resp => {
        //console.log(resp.data)
        admin.value = resp.data
      })
}

getInfo()
</script>

<style scoped>

.demo-datetime-picker .block {
  padding: 30px 0;
  text-align: center;
  border-right: solid 1px var(--el-border-color);
  flex: 1;
}

.demo-datetime-picker .block:last-child {
  border-right: none;
}

.demo-datetime-picker .demonstration {
  display: block;
  color: var(--el-text-color-secondary);
  font-size: 14px;
  margin-bottom: 20px;
}
</style>